let af;
const numberLine = 56;//流星数量
const tail = 400;//拖尾长度
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

// 创建img对象
var img = new Image();
	img.src = "./img/zhiNengSouSuo_back.png";

const createLine = n => {
	const line = [];
	for (let i = 0; i < n; ++i) {
		line.push({
			x: Math.random() * canvas.width,
			y: Math.random() * canvas.height,
			s: Math.random() * 2 + 1
		});
	}
	return line;
};
const renderLine = l => {
	const grad = ctx.createLinearGradient(l.x, l.y, l.x, l.y + tail);
	const a = 1 - (canvas.height - l.y) / canvas.height * 0.8;
	grad.addColorStop(0, `hsla(202,100%,100%,${a})`);
	grad.addColorStop(1, "hsla(202,100%,50%,0)");
	ctx.strokeStyle = grad;
	ctx.beginPath();
	ctx.lineWidth=2.5;
	ctx.moveTo(l.x, l.y);
	ctx.lineTo(l.x, l.y + tail);
	ctx.stroke();
};
const updateLine = l => {
	l.y -= l.s;
	if (l.y < -tail) {
		l.y = canvas.height;
	}
};
const render = line => {
	var bg = ctx.createPattern(img, "no-repeat");//createPattern() 方法在指定的方向内重复指定的元素。
	ctx.fillStyle = bg;//fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	
	for (let l of line) {
		renderLine(l);
		updateLine(l);
	}
	af=requestAnimationFrame(() => render(line));
};
const init = () => {
	cancelAnimationFrame(af);
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	render(createLine(numberLine));
};
window.onresize = init;
init();